<!DOCTYPE html>
<html>
<head>
<title>Electromagnetic Field Diagram</title>
</head>
<body>
<canvas id="physicsCanvas" width="500" height="420" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Clear canvas
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // --- Configuration ---
    const cx = 250;
    const cy = 200;
    const R = 90;
    const lineWidth = 2;
    const arrowSize = 10;
    const textColor = 'black';

    // --- Helper function to draw an arrowhead ---
    // angle is the direction the arrow points to
    function drawArrow(fromX, fromY, toX, toY, angle) {
        ctx.save();
        ctx.translate(toX, toY);
        ctx.rotate(angle);
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(-arrowSize, arrowSize / 2.5);
        ctx.moveTo(0, 0);
        ctx.lineTo(-arrowSize, -arrowSize / 2.5);
        ctx.stroke();
        ctx.restore();
    }

    // --- Main Drawing ---
    ctx.strokeStyle = textColor;
    ctx.lineWidth = lineWidth;

    // Part 1: Vertical wire from bottom
    const startY = cy + 150;
    const wireX = cx - R;
    ctx.beginPath();
    ctx.moveTo(wireX, startY);
    ctx.lineTo(wireX, cy);
    ctx.stroke();

    // Arrow for Part 1 (pointing up)
    const arrow1Y = cy + 70;
    drawArrow(wireX, arrow1Y + 1, wireX, arrow1Y, -Math.PI / 2);

    // Part 2: Semicircular arc
    ctx.beginPath();
    ctx.arc(cx, cy, R, Math.PI, 2 * Math.PI, false); // Using 2*PI is same as 0
    ctx.stroke();
    
    // Arrow for Part 2 (clockwise on the arc)
    const arcArrowAngle = (3 / 4) * Math.PI; // 135 degrees CCW from positive x-axis
    const arcArrowX = cx + R * Math.cos(arcArrowAngle);
    const arcArrowY = cy - R * Math.sin(arcArrowAngle); // Use minus because y is down but we want to go up
    const tangentAngle = arcArrowAngle - Math.PI / 2; // Tangent angle for clockwise motion
    drawArrow(0, 0, arcArrowX, arcArrowY, tangentAngle);


    // Part 3: Horizontal wire to the right
    const endX = cx + R + 150;
    ctx.beginPath();
    ctx.moveTo(cx + R, cy);
    ctx.lineTo(endX, cy);
    ctx.stroke();

    // Arrow for Part 3 (pointing right)
    const arrow3X = cx + R + 70;
    drawArrow(arrow3X - 1, cy, arrow3X, cy, 0);

    // Dashed line for the diameter
    ctx.save();
    ctx.setLineDash([6, 4]);
    ctx.lineWidth = 1;
    ctx.strokeStyle = '#333';
    ctx.beginPath();
    ctx.moveTo(cx - R, cy);
    ctx.lineTo(cx + R, cy);
    ctx.stroke();
    ctx.restore();

    // Radius line R
    ctx.beginPath();
    const radiusAngle = -Math.PI / 4; // 45 degrees in top-right quadrant
    const radiusEndX = cx + R * Math.cos(radiusAngle);
    const radiusEndY = cy + R * Math.sin(radiusAngle);
    ctx.moveTo(cx, cy);
    ctx.lineTo(radiusEndX, radiusEndY);
    ctx.stroke();
    // Arrow for radius
    drawArrow(cx, cy, radiusEndX, radiusEndY, radiusAngle);

    // --- Labels ---
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Labels 1, 2, 3
    ctx.font = '24px Arial';
    ctx.fillText('1', wireX - 25, cy + 70);
    ctx.fillText('2', cx, cy - R - 20);
    ctx.fillText('3', cx + R + 50, cy - 25);
    
    // Labels O and R
    ctx.font = 'italic 24px "Times New Roman"';
    ctx.fillText('O', cx, cy + 20);
    // Position for R label
    const RlabelX = cx + (R / 2) * Math.cos(radiusAngle) + 5;
    const RlabelY = cy + (R / 2) * Math.sin(radiusAngle) - 10;
    ctx.fillText('R', RlabelX, RlabelY);

    // Caption
    ctx.font = '24px "KaiTi", "SimSun", serif';
    ctx.fillText('题 5 图', cx, canvas.height - 30);

</script>
</body>
</html>